<template>
  <view class="goods-list clearfix">
    <u-checkbox-group>
      <view
        v-for="(item, index) in productList"
        :key="index"
        class="flex-item"
        :style="'height:'+itemHeight+'rpx;'"
        @click="viewProductDetailFn(item)"
      >
        <u-checkbox
          v-if="checkboxShow"
          :custom-style="{position: 'absolute', left: '16rpx', top: '16rpx'}"
          size="16"
          active-color="#FF5533"
          :name="item.name"
        />
        <image
          class="close-icon"
          src="/static/image/close.png"
          @click.stop="cancelCollectionFn(item.collectId)"
        />
        <image class="pic" :src="item.skuImg">
          <view class="name uni-ellipsis-2">
            <mp-html :content="item.skuName" />
          </view>
          <view class="price"><text class="price-header">￥</text>{{ item.nowPrice }}</view>
          <view v-if="proLabelShow" class="pro">
            <!--
              item.skuList[0].stock==1 -> 现货
              item.skuList[0].stock!=1-> 订货
              item.skuList[0].productTag==10 -> 协议商品(签约客户展示的标签，小程序无需展示)
              item.skuList[0].activityType==10 -> 特价
              item.skuList[0].activityType==20 -> 满减
           -->
            <text v-if="item.skuList[0].stock==1" class="pro-img t-icon t-icon-xianhuo_tongyong_1" />
            <text v-if="item.skuList[0].stock!=1" class="pro-img t-icon t-icon-dinghuo_tongyong_1" />
            <text v-if="item.skuList[0].activityType==10" class="pro-img t-icon t-icon-tejia_tongyong_1" />
            <text v-if="item.skuList[0].activityType==20" class="pro-img t-icon t-icon-cuxiao_tongyong_1" />
          </view>
          <view v-if="specsShow" class="specs"><text>{{ item.skuNum }}</text>个规格</view>
        </image></view>
    </u-checkbox-group>
  </view>
</template>

<script>
import { cancelColl } from '@/api/shopDetail'

export default {
  options: { styleIsolation: 'shared' }, //解决/deep/不生效**
  name: 'Index',
  props: {
    spuList: {
      type: Array,
      default: () => {
        return []
      }
    },
    editStatus: {
      type: Boolean,
      default: false
    },
    proLabelShow: {
      type: Boolean,
      default: true
    },
    specsShow: {
      type: Boolean,
      default: true
    },
    itemHeight: {
      type: Number,
      default: 564
    },
    checkAll: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    productList() {
      return this.spuList
    },
    checkboxShow() {
      return this.editStatus
    },
    isCheckAll() {
      return this.checkAll
    }
  },
  methods: {
    viewProductDetailFn(res) {
      const {
        skuCode,
        item_id,
        request_id,
        ops_request_misc,
        spuCode //todo 设置参数
      } = res
      uni.navigateTo({
        url: `/shopDetail/index?spuCode=${spuCode}&skuCode=${skuCode}&opsRequestMisc=${ops_request_misc}&requestId=${request_id}&itemId=${item_id}`
      });
    },
    /*取消收藏*/
    async cancelCollectionFn(collectId) {
      const params = {
        collectId: collectId,
        'appletType': 'applet', //平台类型 applet-小程序
      }
      const cancel = await cancelColl(params)
      if (cancel.errorCode == 1) {
        this.$u.toast('已取消收藏')
        setTimeout(() => {
          this.$emit('getListFn')
        }, 2000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/*商品列表*/
.goods-list{
   padding:0 23rpx 0;
   .flex-item{
     position: relative;
     float: left;
     width:calc(50% - 66rpx);
     height: 564rpx;
     margin:16rpx 9rpx 0;
     background:$uni-bg-color;
     padding:0 24rpx;
     border-radius: 8rpx;
     overflow: hidden;
     .close-icon{
       width: 32rpx;
       height: 32rpx;
       position: absolute;
       top: 10rpx;
       right: 10rpx;
     }
     .pic{
       width: 334rpx;
       height: 334rpx;
       overflow: hidden;
       margin: 0 -24rpx;
     }
     .name{
       height: 72rpx;
       line-height: 36rpx;
       font-size: $uni-font-size-base;
       overflow: hidden;
     }
     .price{
       color: $uni-orange;
       font-size: $uni-font-size-lg;
       padding:6rpx 0 8rpx;
       font-weight: bold;
       .price-header{
         font-size: $uni-font-size-sm;
       }
     }
     .pro{
       height: 32rpx;
       .pro-img{
         width: 56rpx;
         height: 32rpx;
         margin-right: 8rpx;
       }
     }
     .specs{
       color: #aaa;
       padding-top: 16rpx;
     }
   }
 }
/deep/.u-checkbox-group--row{
  display: block!important;
  flex-direction: unset!important;
}
</style>
